<template>



  <view>
    <!--上面筛选-->
      <view class="response flex justify-between align-center text-center bg-white text-df padding-tb padding-lr-xl solid-bottom solid-top">
        <!--城市-->
        <view style="width:25%" class="solid-right flex align-center justify-center" @tap="$tools.goTo('/pages/selectCity/selectCity')">
          <!--                <text>{{location.city}}</text>-->
          <text class="text-center">全城</text>
          <view class="inline-block">
            <text class="cuIcon-unfold text-gray margin-left-xs"></text>
          </view>
        </view>
        <!--区域-->
        <!--            <view style="width:25%" class="solid-right" @tap="dropOption('area')"   :class="showDialog.area===true       ? 'expand':''">-->
        <!--                <text>{{searchParams.region_name ? searchParams.region_name :'区域'}}</text>-->
        <!--                <view class="inline-block">-->
        <!--                    <text class="cuIcon-unfold text-gray margin-left-xxs"></text>-->
        <!--                </view>-->
        <!--            </view>-->
        <!--排序-->
        <!--            <view style="width:25%" class="solid-right" @tap="dropOption('sort')" :class="showDialog.sort===true  ? 'expand':''">-->
        <!--                <text>{{sort_name[searchParams.sort]}}</text>-->
        <!--                <view class="inline-block">-->
        <!--                    <text class="cuIcon-unfold text-gray margin-left-xxs"></text>-->
        <!--                </view>-->
        <!--            </view>-->

        <!--          品牌-->
        <view style="width:25%" class="solid-right flex align-center justify-center" @tap="dropOption('area')"
              :class="showDialog.area===true       ? 'expand':''">
          <text class="text-center">{{ searchParams.region_name ? searchParams.region_name : '品牌' }}</text>
          <view class="inline-block">
            <text class="cuIcon-unfold text-gray margin-left-xs"></text>
          </view>
        </view>
        <!--特色-->
        <view style="width:25%" @tap="dropOption('feature')" class="flex align-center justify-center solid-right"
              :class="showDialog.feature===true ? 'expand':''">
          <text class="inline-block text-right"
                style="overflow:hidden;text-overflow: ellipsis;width:120rpx;white-space: nowrap">
            {{ searchParams.hall_name ? searchParams.hall_name : '特色' }}
          </text>
          <view class="inline-block margin-right-lg">
            <text class="cuIcon-unfold text-gray margin-left-xs"></text>
          </view>
        </view>
<!--        搜索-->
        <view @tap="search(item)">
          <text class="cuIcon-search text-center"></text>
        </view>
      </view>

    <!-- 区域开始 -->
    <!--        <view class="cu-modal" :class="showDialog.area ? 'show': '' " :style="'margin-top:'+top+';'" @tap="hide('area')">-->
    <!--            <view style="width:100%;left:0;top:0;"  class="position-absolute bg-white" @tap.stop="">-->
    <!--                <view  class="bg-white text-center text-sm response padding-sm shadow flex flex-wrap " >-->
    <!--                    <view class="bg-gray padding-tb-sm padding-lr radius-df margin-right-sm margin-bottom-sm" :class="item['checked'] ? 'checked':'' " :key="index" v-for="(item,index) in area_data" style="width:30%;" @tap="search(index,'area')">{{item.name}}</view>-->
    <!--                </view>-->
    <!--            </view>-->
    <!--        </view>-->
    <!--/区域结束-->

    <!--      品牌开始-->
    <view class="cu-modal" :class="showDialog.area ? 'show': '' " :style="'margin-top:'+top+';'" @tap="hide('area')">
      <view style="width:100%;left:0;top:0;" class="position-absolute bg-white" @tap.stop="">
        <view class="bg-white text-center text-sm response padding-sm shadow flex flex-wrap ">
          <view class="bg-gray padding-tb-sm padding-lr radius-df margin-right-sm margin-bottom-sm"
                :class="item['checked'] ? 'checked':'' " :key="index" v-for="(item,index) in area_data"
                style="width:30%;white-space: nowrap;overflow: hidden;text-overflow:ellipsis " @tap="search(index,'area')">幸福蓝海国际影城
          </view>
        </view>
      </view>
    </view>

    <!--品牌结束-->
    <!-- 特色开始 -->
    <view class="cu-modal" :class="showDialog.feature ? 'show': '' " :style="'margin-top:'+top+';'"
          @tap="hide('feature')">
      <view style="width:100%;left:0;top:0;" class="position-absolute bg-white" @tap.stop="">
        <view class="bg-white text-center text-sm response padding-sm shadow flex flex-wrap ">
          <view class="bg-gray padding-tb-sm padding-lr radius-df margin-right-sm margin-bottom-sm"
                :class="item['checked'] ? 'checked':'' " :key="index" v-for="(item,index) in feature_data"
                style="width:30%;" @tap="search(index,'feature')">{{ item.name }}
          </view>
        </view>
      </view>
    </view>
    <!--/特色结束-->

    <!--综合排序开始-->
<!--    <view class="cu-modal " :class="showDialog.sort ? 'show': '' " :style="'margin-top:'+top+';'" @tap="hide('sort')">-->
<!--      <view style="width:100%;left:0;top:0;" class="position-absolute bg-white padding-top-sm padding-left-xs"-->
<!--            @tap.stop="">-->
<!--        <view class="padding-tb-sm flex justify-between padding solid-top solid-bottom" @tap="search('dist','sort')">-->
<!--          <text :class="searchParams.sort==='dist' ? 'text-red':''">{{ sort_name.dist }}</text>-->
<!--          <text class="cuIcon-check text-red" v-if="searchParams.sort==='dist'"></text>-->
<!--        </view>-->
<!--        <view class="padding-tb-sm flex justify-between padding" @tap="search('price','sort')">-->
<!--          <text :class="searchParams.sort==='price' ? 'text-red':''">{{ sort_name.price }}</text>-->
<!--          <text class="cuIcon-check text-red" v-if="searchParams.sort==='price'"></text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
    <!--/综合排序结束-->
  </view>


</template>
<script>

const defaultShowDiaglog = {
  area: false,
  feature: false,
  sort: false
}
export default {
  data() {
    return {
      showDialog: defaultShowDiaglog,
      // top: (this.CustomBar + 252) + 'px',
      top:(this.CustomBar + 45) + 'px',
      feature_data: '',
      area_data: '',
      searchParams: {
        city_name: '',
        region_name: '',
        sort: 'dist',
        hall_name: '',
      },
      sort_name: {
        dist: '离我最近',
        price: '价格最低'
      },
    }
  },
  props: [],
  components: {
  },
  computed: {
    location() {
      return this.$tools.location()
    }
  },
  created() {

    console.log('this.list.....')
    console.log(this.list)
    this.fetchFeature()
    this.fetchArea()
  },
  watch: {
    location(newVal, oldVal) {
      console.log('城市发生了变化啦......')
      if (newVal !== oldVal) {
        console.log('城市发生了变化啦fetchArea  ')
        this.fetchArea()
      }

    }
  },
  methods: {
    hide(type) {
      this.showDialog[type] = false
    },
    show(type) {
      this.showDialog[type] = true
    },
    search(index, type) {
      console.log('提交到父组件搜索')
      //console.log(this.feature_area_data[index])

      switch (type) {
          //地区搜索
        case 'area':
          this.area_data.map((v, k) => {
            v.checked = k === index ? true : false;
            return v;
          })
          this.searchParams.region_name = index === 0 ? '' : this.area_data[index]['name']
          break;

          //特色搜索
        case 'feature':
          this.feature_data.map((v, k) => {
            v.checked = k === index ? true : false;
            return v;
          })
          this.searchParams.hall_name = index === 0 ? '' : this.feature_data[index]['name']
          break;
        case 'sort':
          console.log(index)
          this.searchParams.sort = index
          console.log(this.searchParams)
          break;
      }

      // this.hide(type);
      if (!this.searchParams.city_name) this.searchParams.city_name = this.location.city

      console.log('搜索参数')
      console.log(this.searchParams)
      //所有窗口关闭
      this.showDialog = defaultShowDiaglog
      //搜索
      this.$emit('search', this.searchParams)
    },
    //下拉选项
    dropOption(type) {
      let dialog = {...defaultShowDiaglog}
      dialog[type] = !this.showDialog[type]
      this.showDialog = dialog
    },
    async fetchFeature() {
      let res = await this.$api.cinemas_special();
      res.data.list.unshift('不限特色')
      this.feature_data = res.data.list.map((v, k) => {
        let checked = false
        if (k === 0) checked = true
        return {
          id: k,
          name: v,
          checked: checked
        };
      })

      console.log('this.cinemas_feature')
      console.log(this.cinemas_feature)
    },
    async fetchArea() {
      //区域置空
      this.$set(this.searchParams, 'region_name', '')

      let res = await this.$api.region({city_name: this.location.city});
      res.data.list.unshift({id: 0, region_name: '不限区域'})
      this.area_data = res.data.list.map((v, k) => {
        let checked = false
        if (k === 0) checked = true
        return {
          id: v.id,
          name: v.region_name,
          checked: checked
        };
      })
    },
    search(item){
      this.$tools.goTo('/pages/cinema/search')
    }
  }
}
</script>

<style scoped>

.nav-img {
  width: 20 rpx;
  height: 13 rpx;
  margin-left: 10 rpx
}

.nav-search {
  width: 35 rpx;
  height: 35 rpx
}

.expand {
  color: #E53D3D;
}

.expand view {
  transform: rotate(180deg);
}

.expand view text {
  color: #E53D3D;
}

.cu-modal {
  transition-duration: 0s !important;
}

.cu-modal.show {
  opacity: 1;
  transition-duration: 0s !important;
}

.checked {
  color: #F00;
  background: #F9EFEF;
}


</style>